<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ page import="java.util.List"%>
<%@ page import="javax.jdo.PersistenceManager"%>
<%@ page import="com.google.appengine.api.users.User"%>
<%@ page import="com.google.appengine.api.users.UserService"%>
<%@ page import="com.google.appengine.api.users.UserServiceFactory"%>
<%@ page import="au.org.htd.youslide.SongProject"%>
<%@ page import="au.org.htd.youslide.Background"%>
<%@ page import="au.org.htd.youslide.PMF"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="styles/template.css" rel="stylesheet" type="text/css" />
<link href="styles/homepage.css" rel="stylesheet" type="text/css" />
<link href="styles/mavdialog.css" rel="stylesheet" type="text/css" />
<script src="scripts/mootools-1.2.2-core.js" type="text/javascript"></script>
<script src="scripts/mootools-1.2.2.2-more.js" type="text/javascript"></script>
<script src="scripts/util.js" type="text/javascript"></script>
<script src="scripts/class.MavDialog.js" type="text/javascript"></script>
<title>youslide - welcome</title>

<script type="text/javascript">
    var a = 'domready';
	   window.addEvent(a, function() {
       disableSelection('.box');

	  	 if(Browser.Engine.trident) { //IE
	       var slideVar = new Fx.Slide($('slidable'), {
	           mode: 'vertical', 
             transition: 'sine:in', 
             duration: '500'
	         }).hide().show().hide();
	  	 } else {
			   var slideVar = new Fx.Slide($('slidable'), {
					 mode: 'horizontal', 
					 transition: 'elastic:out',
					 duration: '1500'
				 }).hide().show().hide();
	  	 }
			 slideVar.slideIn();
<%UserService userService = UserServiceFactory.getUserService();
         User user = userService.getCurrentUser();
         if (user != null) {%> 			 
			 	
			 $('create').addEvent('click', function(){
		     if('English name' == $('name_form').englishName.value &&
		        'Chinese name' == $('name_form').chineseName.value) {
           new MavDialog.Alert({
             'title': "Can't create new slideshow",
             'message': 'Please enter at least one name',
             'width': 'auto',
             'force': true
           });
           return;
         }
			 
         slideVar.slideOut().addEvent('onComplete', function(){
					 $('name_form').submit();
				 });
			 });
			 
			 $('more').addEvent('click', function(){
				 slideVar.slideOut().addEvent('onComplete', function(){
					 location.href = 'library.jsp';
				 });
			 });
			 
			 $$('.box').addEvent('click', function(){
 				 new Request({
				   method: 'get',
				   url: '/search',
 				   data: { 'requestType':'byId', 
				           'id':this.id},
				   onRequest: function() { 
				     slideVar.slideOut();
				   },
           onComplete: function(response) {
             location.href = 'library.jsp';
           }				   
				 }).send();
			 });			 
<%}%> 		 
		 });
    </script>
</head>

<body>
<div id="masthead"><a href="index.jsp" id="branding"> <img
  src="images/logo.jpg" alt="youSlide" border="0" /> </a> <%
    if (user != null) {
 %>
<div id='welcome'>Welcome, <%=user.getNickname()%> (<a
  href="<%=userService.createLogoutURL(request.getRequestURI())%>">Sign out</a>)</div>
<%
   }
%>
</div>
<div id="wrapper" class="funbg">
<div id="slidable">
<%
   if (user != null) {
%>
<h1>Create a new slideshow</h1>

<form id="name_form" method="post" action="/slides?requestType=create"><input
  class="language" type="text"
  onblur="if (this.value == '') { this.value = this.defaultValue; }"
  onfocus="if (this.value == this.defaultValue) { this.value = ''; }"
  value="English name" name="englishName" /> and/or <input class="language"
  type="text" onblur="if (this.value == '') { this.value = this.defaultValue; }"
  onfocus="if (this.value == this.defaultValue) { this.value = ''; }"
  value="Chinese name" name="chineseName" /> <input id="create" class="submit"
  type="button" /></form>

<div id="recent"></div>

<%
   PersistenceManager pm = PMF.getPM();
      String query = "select from " + SongProject.class.getName()
            + " order by lastUpdate desc";
      List<SongProject> songs = (List<SongProject>) pm.newQuery(query)
            .execute();
      if (songs.isEmpty()) {
%>
<p>No recent works</p>
<%
   } else {
         for (int i = 0; i < songs.size() && i < 3; i++) {
            SongProject song = songs.get(i);
            Long bgId = song.getBackgroundId();
            if (null != bgId) {
%>
<div class="box" id="<%=song.getId()%>">
<div
  style="background:url(/download?requestType=thumbnail&id=<%=bgId%>) no-repeat">
<span><%=song.getEnglishName()%> <br>
<%=song.getChineseName()%></span></div>
<span>by <%=null == song.getCreator() ? "unknown"
                           : song.getCreator().getNickname()%></span> <%
    int days = song.getAge().intValue();
                switch (days) {
                case 0:
 %> (today) <%
    break;
                case 1:
 %> (yesterday) <%
    break;
                default:
 %> (<%=days%> days ago) <%
    }
 %>
</div>
<%
   }
         }
      }
      pm.close();
%>
<div id="more"><br>
find more in the library &raquo;</div>
</div>
<%
   } else {
%>
<p>Hello! <a href="<%=userService.createLoginURL(request.getRequestURI())%>">Sign
in</a></p>
<%
   }
%>
</div>
</body>
</html>
